import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

//----------------------------------------------------------------------------------------------------------------------

/*MockJs特色，拦截ajax请求（jQuery、Zepto、KISSY），生成随机数据*/

import Mock from 'mockjs';
import jQuery from 'jquery';

/**
 * String
 */
let data = Mock.mock({
    "lvchanglong|3": "★" // 以重复value值★的方式生成字符串，重复3次
})
console.log(data); //对象 {lvchanglong: "★★★"}
console.log(JSON.stringify(data)); //JSON {"lvchanglong":"★★★"}

console.log(
    Mock.mock({
        "lvchanglong|1-10": "★" // 以重复value值★的方式生成字符串，重复次数随机，最少为1次，最多为10次
    })// {lvchanglong: "★★★★"}
)

/**
 * Number
 */
console.log(
    Mock.mock({
        "number|+1": 100 //初始值100，自动+1，常用于模拟数组中的id值
    })
)

console.log(
    Mock.mock({
        "number|1-100": 100 // 生成一个大于等于1、小于等于100的整数，属性值100只用来确定类型
    }) // {number: 24}
) //{number: 100}

console.log(
    Mock.mock({
        "number|1-100.1-10": 100 // 生成一个浮点数，整数部分大于等于 1、小于等于 100，小数部分保留 1 到 10 位小数
    }) //{number: 13.17582765}
)

console.log(
    Mock.mock({
        "number|123.3": 100 //整数部分等于123，小数部分保留3位小数
    }) //{number: 123.545}
)

/**
 * Boolean
 */
console.log(
    Mock.mock({
        "boolean|1": true//随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率是 1/2
    })//{boolean: true}
)

console.log(
    Mock.mock({
        "boolean|1-2": true //值为 true 的概率是 1/(1 + 2)=1/3，值为 false 的概率是 2/(1 + 2)=2/3
    })//{boolean: true}
)

/**
 * Object
 */
console.log(
    Mock.mock({
        "object|2": { //从对象中随机选取2个属性
            "310000": "上海市",
            "320000": "江苏省",
            "330000": "浙江省",
            "340000": "安徽省"
        }
    })
)

/*
{
    "object": {
        "320000": "江苏省",
        "330000": "浙江省"
    }
}
*/

console.log(
    Mock.mock({
        "object|2-4": { //从对象中随机选取属性，最小个数为2，最大个数为4
            "110000": "北京市",
            "120000": "天津市",
            "130000": "河北省",
            "140000": "山西省"
        }
    })
)

/*
{
    "object": {
        "120000": "天津市",
        "130000": "河北省",
        "140000": "山西省"
    }
}
*/

/**
 * Array
 */
console.log(
    Mock.mock({ //从数组中随机选取1个数据
        "array|1": [
            "AMD",
            "CMD",
            "UMD"
        ]
    })
)

/*{
  "array": "UMD"
}*/

console.log(
    Mock.mock({
        "array|1-10": [ //以重复value值的方式生成数组，重复次数随机，最少1次，最多10次
            {
                "name|+1": [ //子数组索引+1（无穷循环）
                    "Hello",
                    "Mock.js",
                    "!"
                ]
            }
        ]
    })
)

/*{
  "array": [
    {
      "name": "Hello"
    },
    {
      "name": "Mock.js"
    },
    {
      "name": "!"
    },
    {
      "name": "Hello"
    }
  ]
}*/

console.log(
    Mock.mock({
        'foo': 'Syntax Demo',
        'name': function() {
            return this.foo
        }
    })
)

/*{
  "foo": "Syntax Demo",
  "name": "Syntax Demo"
}*/

/*正则RegExp，路径Path（@）...略，详情 http://mockjs.com/examples.html*/

console.log(
    Mock.mock('@boolean()') //真假概率各50%
)
Mock.mock('@boolean(1, 9, true)') //true概率1/10, false概率9/10

Mock.mock('@natural()') //生成随机自然数，大于等于0
Mock.mock('@natural(10000)') //生成随机自然数，大于等于0，最小值10000
Mock.mock('@natural(60,100)') //生成随机自然数，大于等于60，最小值100

Mock.mock('@integer()') //-7512162341724956
Mock.mock('@float()') //-3996313092848400.5
Mock.mock('@float(60, 100, 3, 5)') //整数部分最小值60，最大值100，小数位数最小值3，最大值5。例如，74.247

Mock.mock('@character()') //随机字符
Mock.mock('@character("lower")') //随机生成一个小写字符
Mock.mock('@character("upper")') //随机生成一个大写字符
Mock.mock('@character("number")') //随机生成一个数字字符
Mock.mock('@character("symbol")') //随机生成一个符号字符
Mock.mock('@character("aeiou")') //随机从字符池中选择一个字符

Mock.mock('@string()')
Mock.mock('@string(5)') //固定长度
Mock.mock('@string("lower", 5)')//"erwrw"
Mock.mock('@string("upper", 5)')//"KKALF"
Mock.mock('@string("number", 5)')//"46371"
Mock.mock('@string("symbol", 5)')//"@)@*@"
Mock.mock('@string("aeiou", 5)')//"iuiae"
Mock.mock('@string(7, 10)') //最小长度7，最大长度10
Mock.mock('@string("lower", 1, 3)')
Mock.mock('@string("upper", 1, 3)')
Mock.mock('@string("number", 1, 3)')
Mock.mock('@string("symbol", 1, 3)')
Mock.mock('@string("aeiou", 1, 3)')

Mock.mock('@range(10)') //[0,1,2,3,4,5,6,7,8,9]
Mock.mock('@range(3, 7)') //[3,4,5,6]
Mock.mock('@range(1, 10, 2)')//[1,3,5,7,9]，2
Mock.mock('@range(1, 10, 3)')//[1,4,7]，3

Mock.mock('@date()')//"1977-10-27"
Mock.mock('@date("yyyy-MM-dd")')//"1998-08-27"

Mock.mock('@time()')//"20:43:11"
Mock.mock('@datetime()')//"1980-07-10 00:15:59"

Mock.mock('@now()')//"2018-10-02 19:09:55"

Mock.mock('@color()')//"#f27991"
Mock.mock('@rgb()')//"rgb(127, 121, 242)"
Mock.mock('@rgba()')//"rgba(121, 221, 242, 0.38)"

Mock.mock('@paragraph()') //文本中句子数，默认3-7
Mock.mock('@paragraph(2)') //文本中句子数，2
Mock.mock('@paragraph(1, 3)')//文本中句子数，1-3

Mock.mock('@sentence()') //句子中单词数，默认12-18
Mock.mock('@sentence(5)')//句子中单词数，5
Mock.mock('@sentence(3, 5)')//句子中单词数，3-5

Mock.mock('@word()') //单词中字符数，默认3-10
Mock.mock('@word(5)') //单词中最小字符数，5
Mock.mock('@word(3, 5)')//单词中最小字符数是3，最大是5

Mock.mock('@title()') //随机生成一句标题，其中每个单词的首字母大写
Mock.mock('@title(5)')
Mock.mock('@title(3, 5)')

Mock.mock('@cparagraph()') //同@paragraph()，但为中文
Mock.mock('@csentence()') //同@sentence()，但为中文
Mock.mock('@cword()') //同@word()，但为中文
Mock.mock('@ctitle()') //同@title()，但为中文

Mock.mock('@first()') //英文名
Mock.mock('@last()') //英文姓
Mock.mock('@name()') //英文姓名

Mock.mock('@cfirst()') //中文姓
Mock.mock('@clast()') //中文名
Mock.mock('@cname()') //中文姓名

Mock.mock('@url()') //随机生成url
Mock.mock('@email()') //随机生成email
Mock.mock('@ip()') //随机生成ip

Mock.mock('@region()')//地域，如东北
Mock.mock('@province()') //省，如辽宁省
Mock.mock('@city()') //市，如沈阳市
Mock.mock('@city(true)') //省市，"河南省 郑州市"
Mock.mock('@county()')//区，"路桥区"
Mock.mock('@county(true)')//"香港特别行政区 九龙 黄大仙区"
Mock.mock('@zip()') //邮政编码

Mock.mock('@upper("hello")') //"HELLO"
Mock.mock('@lower("HELLO")') //"hello"
Mock.mock('@pick(["a", "e", "i", "o", "u"])') //随机选取，"e"
Mock.mock('@shuffle(["a", "e", "i", "o", "u"])') //洗牌，["e","o","i","u","a"]

Mock.mock('@guid()') //"7FF45f1A-B0fC-bCCD-f6E4-CF6B3cc1f795"
Mock.mock('@id()') //"370000199601214026"

/*详情 http://mockjs.com/examples.html*/

Mock.Random.image('200x100', '#50B347', '#FFF', 'Mock.js')

console.log(
    Mock.Random.dataImage('200x100', 'Hello Mock.js!')
)

//##########################################################################################

Mock.mock('http://jsonplaceholder.typicode.com/users', {
    'array|1-10':[{
        'id|+1': 100,
        'name': '@cname()',
        'username': '@word()',
        'email': '@email()',
        'remark': "@cparagraph()"
    }]
});

jQuery.ajax({ //可拦截（jQuery、Zepto、KISSY）
    url:"http://jsonplaceholder.typicode.com/users",
    dataType:"json",
    success(data){
        console.log(data);
    },
    error(err) {
        console.log(err);
    }
});

fetch('http://jsonplaceholder.typicode.com/users').then((response) => { //不可拦截
    return response.json(); //此返回值将传给下一个then的参数（data）,简单理解，等同于JSON.parse(response.text())
}).then((data) => {
    console.log(data);
});

//----------------------------------------------------------------------------------------------------------------------

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();
